<template>
  <ele-modal :form="true" :width="800" :title="data ? '编辑按钮' : '新增按钮'" position="center" v-model="visible"
    @open="handelOpen" @close="handelClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
      <el-row :gutter="24">
        <!-- 权限名称 -->
        <el-col :lg="12" :md="12" :sm="12" :xs="24">
          <el-form-item label="权限名称:" prop="name">
            <el-input v-model="form.name" clearable></el-input>
          </el-form-item>
        </el-col>
        <!-- 排序 -->
        <el-col :lg="12" :md="12" :sm="12" :xs="24">
          <el-form-item label="排序:" prop="sort">
            <el-input-number v-model="form.sort" :min="0" :value-on-clear="0" />
          </el-form-item>
        </el-col>
        <!-- 路径码 -->
        <el-col :lg="24" :md="12" :sm="12" :xs="24">
          <el-form-item label="路径码:" prop="permCode">
            <el-input style="width: 600px;" v-model="form.permCode" clearable></el-input>
          </el-form-item>
        </el-col>
        <!-- 按钮备注 -->
        <el-col :lg="24" :md="12" :sm="12" :xs="24">
          <el-form-item label="按钮备注:" prop="comment">
            <el-input v-model="form.comment" style="width: 600px" :rows="2" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <!-- 按钮状态 -->
        <el-col :lg="12" :md="12" :sm="12" :xs="24">
          <el-form-item label="状态:" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio value="0">禁用</el-radio>
              <el-radio value="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" :loading="loading" @click="save">提交</el-button>
    </template>
  </ele-modal>
</template>

<script setup lang="ts">
import { ref, reactive} from "vue"
import { EleMessage } from "ele-admin-plus";
import type { FormInstance, FormRules } from 'element-plus';
import { useFormData } from "@/utils/use-form-data";
import { add, edit } from "@/api/system/SysPermission"
import type { SysPermission, AddSysPermission } from '@/api/system/SysPermission/model';

const props = defineProps<{
  data: SysPermission | null
  menuId: string
}>()

const emit = defineEmits<{
  (e: 'reload'): void
}>()

const formRef = ref<FormInstance | null>(null);
const loading = ref<boolean>(false)
const visible = defineModel({ type: Boolean });
const { form, resetFields, assignFields } = useFormData<AddSysPermission>({
  comment: '',        // 备注说明（可为空）
  menuId: '',         // 菜单id（必填）
  status: '1',        // 状态（0 禁用，1 正常）
  name: '',           // 权限名称（必填）
  permCode: '',       // 权限路径码（必填）
  sort: 0,         // 排序序号（可为空）号
})

const rules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: '请输入菜单名称',
      type: 'string',
      trigger: 'blur'
    }
  ],
  permCode: [
    {
      required: true,
      message: '请输入菜单名称',
      type: 'string',
      trigger: 'blur'
    }
  ],
});

const save = () => {
  formRef.value?.validate()
    .then(async () => {
      loading.value = true
      const res = props.data ? await edit({ ...form, id: props.data.id }) : await add({ ...form, menuId: props.menuId })
      loading.value = false
      if (res.code == 200) {
        EleMessage.success("提交成功")
        emit('reload')
      } else {
        EleMessage.error(res.message)
        return
      }
      visible.value = false
    })
}

const handelOpen = () => {
  if (props.data) {
    assignFields(props.data)
  }
}

const handelClose = () => {
  resetFields()
  formRef.value?.resetFields()
}

</script>

<style scoped></style>
